<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .box {
      width: 800px;
      height: 500px;
      border: 1px solid #000;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    li {
      width: 240px;
      border: 1px solid #000;
      border-radius: 10px;
      height: 170px;
      margin-top: 30px;
      list-style: none;
      padding: 15px;
      display: flex;
    }

    li img {
      width: 110px;
      height: 100%;
    }
    h3 {
      font-size: 14px;
    }
  </style>
</head>
<body>
  <h1>淘宝列表</h1>
  <ul class="box">
    
  </ul>
  

  <script>
    var box = document.querySelector(".box");

    // innerHTML属性可以获取到这个元素里面所有的内容(转成字符串)
    // console.log(box.innerHTML)

    // box.innerHTML = "<p>hello</p>"


    // var arr = ["111", "222", "333"];
    // for (var i = 0; i < arr.length; i++) {
    //   box.innerHTML += "<li>" + arr[i] + "</li>"
    // }


    var data = [
      {
        id: 1,
        product_name: "妙洁海绵拖把免手洗家用懒人魔吸水海绵头一拖净瓷砖胶棉地拖替换",
        product_price: 29.8,
        product_img: "https://gw.alicdn.com/bao/uploaded/i3/387456158/O1CN01Sa74OQ1vMPidBk7QA_!!387456158.jpg_300x300q90.jpg_.webp",
        flag: 1 // 1表示送运费险
      },
      {
        id: 2,
        product_name: "蜡基碳带110mm*70m 90GK888t斑马 北洋btp-l42条码标签打印机碳带卷色带",
        product_price: 50,
        product_img: "https://gw.alicdn.com/bao/uploaded/i2/811973764/O1CN01pnBVHK1dfxeGluqlv_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        flag: 0 // 0表示不送运费险
      },
      {
        id: 3,
        product_name: "高密度PVA吸水海绵无尘布纳米清洁海绵块魔力擦厨房去污涂装湿盘",
        product_price: 15.19,
        product_img: "https://gw.alicdn.com/bao/uploaded/i2/25241842/O1CN01zAGQEG1PTgFTbdbNv_!!25241842.jpg_300x300q90.jpg_.webp",
        flag: 1 // 0表示不送运费险
      },
      {
        id: 4,
        product_name: "一次性瓦楞纸杯咖啡杯纸杯带盖杯子家用咖啡一次用水杯加厚纸杯子",
        product_price: 14.99,
        product_img: "https://gw.alicdn.com/bao/uploaded/i1/50406463/O1CN01uGnwYA1xc6cbZcKLU_!!50406463.jpg_300x300q90.jpg_.webp",
        flag: 1 // 1表示送运费险
      },
      {
        id: 5,
        product_name: "乐普升米黄色修正带可爱创意多功能改错带双色双头透明带初中生免运费少女涂改带小学生文具小清新改正带包邮",
        product_price: 13.8,
        product_img: "https://gw.alicdn.com/bao/uploaded/i1/2481196374/O1CN01xxD4r31wxLFszYoXZ_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        flag: 0 // 0表示不送运费险
      },
      {
        id: 6,
        product_name: "悠享佳夏威夷果仁450g去壳整粒原味澳洲干坚果孕妇儿童休闲零食",
        product_price: 99,
        product_img: "https://gw.alicdn.com/bao/uploaded/i1/1103710797/O1CN01VqqsMf1Hl4UizpzMQ_!!0-item_pic.jpg_300x300q90.jpg_.webp",
        flag: 0 // 0表示不送运费险
      },
    ]

    for (let i = 0; i < data.length; i++) {
      console.log(data[i].product_name);
      box.innerHTML += '<li><img src=' + data[i].product_img + ' alt=""><div class="content"><h3>' + data[i].product_name + '</h3><span style="color: red;">￥' + data[i].product_price + '</span></div></li>'
    }
  </script>
</body>
</html>